<template>
  <div>
     <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>拼团详情：{{this.course.courseName}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-button style="float:left;margin-top: 15px;margin-left:15px;" type="primary" icon="el-icon-back" @click="openCourse()" >返回课程列表</el-button>
    <el-button style="float:left;margin-top: 15px;" type="primary" icon="el-icon-refresh" @click="loadPt()" >刷新</el-button>
    <el-button class="add-button"  style="float:left;margin-top: 15px;" type="primary" icon="el-icon-circle-check" @click="dialogVisible = true" >发起3人拼团</el-button>

    <!-- 发起拼团弹窗 -->
    <el-dialog
      title="发起3人拼团"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span style="font-size:25px;">拼团课程：{{this.course.courseName}}</span><br>
      <span style="font-size:25px;">拼团价格：{{this.course.ptTuition}}(元)</span><br>
      <span style="font-size:25px;">团单失效时间：{{this.course.endTime}}</span><br>
      <span style="font-size:25px;">拼团人数：3</span>
      <br>
      <br>
      <br>
      <br>
      <el-steps :active="0" align-center>
        <el-step title="步骤1" description="发起拼团"></el-step>
        <el-step title="步骤2" description="支付拼团订单"></el-step>
        <el-step title="步骤3" description="等待拼团"></el-step>
        <el-step title="步骤4" description="拼团成功"></el-step>
      </el-steps>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPt()">确 定 发 起</el-button>
      </span>
    </el-dialog>

    <!-- 查看拼团详情弹窗 -->
    <el-dialog title="参与拼团" :visible.sync="dialogTableVisible">
      <el-table :data="dataChildren">
        <el-table-column property="username" label="用户" width="150"></el-table-column>
        <el-table-column property="productId" label="拼团商品ID" width="200"></el-table-column>
        <el-table-column property="ptTuition" label="拼团价格(元)"></el-table-column>
        <el-table-column property="createTime" label="参团时间"></el-table-column>
      </el-table>
      <div v-if="Dialogstatus === 1">
        <br><br><br> <br>
        <el-steps :active="2" align-center>
          <el-step title="步骤1" description="参与拼团"></el-step>
          <el-step title="步骤2" description="支付拼团订单"></el-step>
          <el-step title="步骤3" description="等待拼团"></el-step>
          <el-step title="步骤4" description="拼团成功"></el-step>
        </el-steps>
      </div>
       <div v-else-if="Dialogstatus != 1">
         <br><br><br> <br>
         <el-steps :active="4" align-center>
          <el-step title="步骤1" description="参与拼团"></el-step>
          <el-step title="步骤2" description="支付拼团订单"></el-step>
          <el-step title="步骤3" description="等待拼团"></el-step>
          <el-step title="步骤4" description="拼团成功"></el-step>
      </el-steps>
       </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button  v-if="Dialogstatus === 1" type="primary" @click="onSubmitPt">确 定 参 团</el-button>
      </div>
    </el-dialog>

    <!-- 下面是表格数据 -->
    <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="data" border style="width: 100%" :max-height="tableHeight">

        <el-table-column prop="username" label="团长" fit></el-table-column>
        <!-- <el-table-column prop="fatherId" label="fatherId" fit></el-table-column>
        <el-table-column prop="productId" label="拼团商品ID" fit></el-table-column> -->
        <el-table-column label="拼团课程" fit>{{this.course.courseName}}</el-table-column>
        <el-table-column prop="ptNum" label="拼团人数" sortable fit></el-table-column>
        <el-table-column prop="ptTuition" label="拼团价格(元)" fit></el-table-column>
        <el-table-column prop="createTime" label="团单创建时间" fit></el-table-column>
        <el-table-column prop="endTime" label="团单失效时间" fit></el-table-column>

        <el-table-column label="订单状态" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.ptStatus === 1">
              <el-tag type="success">拼团中</el-tag>
            </div>
            <div v-if="scope.row.ptStatus === 2">
              <el-tag type="danger">拼团成功</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="拼团" fixed="right" width="140">
          <template slot-scope="scope" >
            <div v-if="scope.row.ptStatus === 1">
             <el-button
             style="margin-left:0;margin-top:5px;color:#BB33FD;"
              @click="openPt(scope.row.fatherId,1)"
              size="small" round
              icon="el-icon-shopping-cart-2"
            >去拼团</el-button>
            </div>
            <div v-if="scope.row.ptStatus === 2">
             <el-button
             style="margin-left:0;margin-top:5px;color:#BB33FD;"
              @click="openPt(scope.row.fatherId,0)"
              size="small" round
              icon="el-icon-shopping-cart-2"
            >查看拼团</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PtIndex',
  data () {
    return {
      data: [],
      dataChildren: [],
      dataChildrenFatherId: '',
      queryKey1: '',
      queryKey2: '',
      queryKey3: '',
      course: '',
      Dialogstatus: '',
      dialogVisible: false,
      dialogTableVisible: false
    }
  },
  mounted () {
    this.loadPt()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 250
    }
  },
  methods: {
    addPt () {
      this.$axios.post('admin/pt/' + this.course.courseId).then((resp) => {
        if (resp && resp.data.code === 200) {
          // 从后端返回信息
          this.$alert(resp.data.message, '提示', {
            type: 'success',
            dangerouslyUseHTMLString: true
          })
        } else {
          // 从后端返回错误信息
          this.$alert(resp.data.message, '错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
      this.dialogVisible = false
    },
    loadPt () {
      var _this = this
      // 页面跳转传值
      var courseId = this.$route.params.courseId
      var id = Number(this.$route.params.id)
      this.$axios.get('/course/' + id).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.course = resp.data.result
        } else {
          // 从后端返回错误信息
          this.$alert(resp.data.message, 'course错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
      this.$axios.get('/admin/pt/' + courseId).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result
          this.$message({
            type: 'success',
            message: '刷新成功'
          })
        } else {
          // 从后端返回错误信息
          this.$alert(resp.data.message, 'pt错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
    },
    openCourse () { // 返回课程列表
        this.$router.push({ path: '/admin/course' })
    },
    // 弹窗组件
    handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
    },
    openPt (fatherId, status) { // 查看拼团详情、参加拼团
      this.dialogTableVisible = true
      this.dataChildrenFatherId = fatherId
      this.Dialogstatus = status
      var _this = this
      this.$axios.get('/admin/ptChildren/' + fatherId).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.dataChildren = resp.data.result
        } else {
           // 从后端返回错误信息
          this.$alert(resp.data.message, '错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
    },
    onSubmitPt () {
      console.log(this.dataChildrenFatherId)
      this.$axios.post('admin/joinPt/' + this.dataChildrenFatherId).then((resp) => {
        if (resp && resp.data.code === 200) {
          // 从后端返回信息
          this.$alert(resp.data.message, '提示', {
            type: 'success',
            dangerouslyUseHTMLString: true
          })
          this.dialogTableVisible = false
        } else {
          // 从后端返回错误信息
          this.$alert(resp.data.message, '错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.add-button {
     margin: 0px 0 20px 15px;
  }
</style>
